<template>
  <div class="minArea">
    <img :src="businessImg" alt="">
    <div class="minAreaFont">
      <p class="name">{{name}}</p>
      <p class="detail">{{briefly}}</p>
      <p class="much"><span>¥</span>{{money}}</p>
    </div>
  </div>
</template>
<script>
  export default {
    props: ['businessImg', 'name', 'briefly', 'money'],
  }
</script>

<style>
  .minArea{
    height: 260rpx;
    margin: 20rpx;
    border-radius: 10rpx;
    overflow: hidden;
    box-shadow: 0 0 8rpx 1rpx rgba(0,0,0,0.1);
  }
  .minArea img{
    height: 260rpx;
    width: 400rpx;
    float: left;
    display: block;
  }
  .minArea .minAreaFont{
    height: 260px;
    margin-left: 400rpx;
  }
  .minArea .name{
    font-size: 28rpx;
    color: #3e3e3e;
    padding: 30rpx 35rpx 0 35rpx;
    text-align: center;
    font-weight: bold;
  }
  .minArea .detail{
    font-size: 24rpx;
    color: #999999;
    padding: 0 30rpx;
    text-align: center;
    height: 96rpx;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    margin-top: 20rpx;
  }
  .minArea .much{
    font-size: 48rpx;
    color: #57d9bf;
    font-weight: bold;
    text-align: center;
  }
  .minArea .much span{
    font-size: 30rpx;
  }
</style>
